<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>编辑角色</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/plugns/zTree/v3/css/metroStyle/metroStyle.css">
    <script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" th:href="@{/css/common.css}">
    <link rel="stylesheet" th:href="@{/css/animate.min.css}">
    <link rel="stylesheet" th:href="@{/js/layui_ext/dtree/dtree.css}">
    <link rel="stylesheet" th:href="@{/js/layui_ext/dtree/font/dtreefont.css}">
    <script type="text/javascript"
            src="/plugns/zTree/v3/js/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" src="/plugns/zTree/v3/js/jquery.ztree.excheck-3.5.js"
            charset="utf-8"></script>
    <script type="text/javascript" src="/js/tools.js"></script>
    <script type="text/javascript" src="/js/common/update-setting.js"></script>
</head>

<body>
<div class="x-body">
    <form class="layui-form layui-form-pane" style="margin-left: 20px;">
        <div style="width:100%;height:400px;overflow: auto;">
            <div class="layui-form-item">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
                    <legend style="font-size:16px;">部门信息</legend>
                </fieldset>
            </div>
            <div class="layui-form-item">
                <label for="deptName" class="layui-form-label">
                    <span class="x-red">*</span>部门名称
                </label>
                <div class="layui-input-inline">
                    <input th:value="${sysDept?.id}" type="hidden" name="id">
                    <input type="text" th:value="${sysDept?.deptName}" id="deptName" name="deptName"
                           lay-verify="deptName"
                           autocomplete="off" class="layui-input">
                </div>
                <div id="ms" class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span><span id="ums">部门名称必填</span>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="sort" class="layui-form-label">
                    <span class="x-red">*</span>排序值
                </label>
                <div class="layui-input-inline">
                    <input type="text" th:value="${sysDept?.sort}" id="sort" name="sort"
                           lay-verify="sort"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    上级部门
                </label>
                <div class="layui-input-block">
                    <div class="layui-unselect layui-form-select" id="parentNameDiv">
                        <div class="layui-select-title">
                            <input type="text" id="parentName"
                                   placeholder="请选择" class="layui-input layui-unselect" readonly>
                            <input type="hidden" name="parentId" id="parentId">
                            <i class="layui-edge"></i>
                        </div>
                    </div>
                    <div class="layui-card dtree-select" id="parentTreeDiv">
                        <div class="layui-card-body">
                            <div id="toolbarDiv">
                                <ul id="parentTree" class="dtree" data-id="0" style="width: 100%;"></ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="width: 100%;height: 55px;background-color: white;border-top:1px solid #e6e6e6;
  position: fixed;bottom: 1px;margin-left:-20px;">
            <div class="layui-form-item" style=" float: right;margin-right: 30px;margin-top: 8px">
                <button class="layui-btn layui-btn-blue" th:text="${sysDept}?'修改':'增加'" lay-submit=""
                        data-th-lay-filter="${sysDept}?'editDept':'addDept'">
                </button>
                <button class="layui-btn layui-btn-primary" id="close">
                    取消
                </button>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" src="/layui/layui.js"></script>

<script>
    var $;
    layui.config({
        base: '/js/common/' //假设这是你存放拓展模块的根目录
    }).use(['form', 'layer','common','dtree'], function () {
        $ = layui.jquery;
        var form = layui.form,
            common = layui.common
            ,dtree = layui.dtree
            , layer = layui.layer;

        //自定义验证规则
        form.verify({
            roleName: function (value) {
                if (value.trim() == "") {
                    return "角色名不能为空";
                }
            }
        });
        var deptDTree = dtree.render({
            elem: "#parentTree",
            url: "tree/root",
            dataStyle: "layuiStyle",
            method: "GET",
            dot: false,     // 圆点是否显示
            accordion: true,
            menubar: true,
            response: {
                statusCode: 200,
                message: "message",
                treeId: "id",
                parentId: "parentId",
                title: "deptName"
            },
            done: function (response, obj) {
                var parentId = getQueryString('parentId') ? getQueryString('parentId') : [[${sysDept?.parentId + ''}]];
                var parent = deptDTree.getParam(parentId);
                if (parent) {
                    $("#parentName").val(parent.context);
                    $("#parentId").val(parent.nodeId);
                }
            }
        });

        $("#parentName").on("click", function () {
            $(this).toggleClass("layui-form-selected");
            $("#parentTreeDiv").toggleClass("layui-show layui-anim layui-anim-upbit");
        });

        dtree.on("node(parentTree)", function (obj) {
            console.log(obj);
            $("#parentName").val(obj.param.context);
            $("#parentId").val(obj.param.nodeId);
            $("#parentNameDiv").toggleClass("layui-form-selected");
            $("#parentTreeDiv").toggleClass("layui-show layui-anim layui-anim-upbit");
        });
        //监听提交
        form.on('submit(editDept)', function (data) {
            var userSaveLoading = top.layer.msg('数据提交中，请稍候',{icon: 16,time:false,shade:0.8});
            $.post("edit",data.field,function (res) {
                if(res.success){
                    top.layer.close(userSaveLoading);
                    common.cmsLaySucMsg("修改成功！");
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index); //再执行关闭                        //刷新父页面
                    parent.location.reload();
                }else{
                    top.layer.close(userSaveLoading);
                    common.cmsLayErrorMsg(res.message);
                }
            });
            return false;
        });
        //监听提交
        form.on('submit(addDept)', function (data) {
            var userSaveLoading = top.layer.msg('数据提交中，请稍候',{icon: 16,time:false,shade:0.8});
            $.post("add",data.field,function (res) {
                if(res.success){
                    top.layer.close(userSaveLoading);
                    common.cmsLaySucMsg("添加成功！");
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index); //再执行关闭                        //刷新父页面
                    parent.location.reload();
                }else{
                    top.layer.close(userSaveLoading);
                    common.cmsLayErrorMsg(res.message);
                }
            });
            return false;
        });
        $("#close").on("click", function(){
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index); //再执行关闭                        //刷新父页面
            parent.location.reload();
        } )


    });
</script>
</body>

</html>
